import React from 'react';
import { Card, List, Tag, Typography, Timeline } from 'antd';

const { Title } = Typography;

const LatestRecommend: React.FC = () => {
  const latestProducts = [
    {
      id: 1,
      name: '全新机械键盘',
      price: 199,
      category: '电子产品',
      time: '刚刚',
      location: '计算机学院',
      description: '青轴机械键盘，RGB背光，全新未拆封'
    },
    {
      id: 2,
      name: '线性代数教材',
      price: 20,
      category: '书籍资料',
      time: '5分钟前',
      location: '数学学院',
      description: '大二线性代数教材，基本全新'
    },
    {
      id: 3,
      name: '瑜伽垫',
      price: 35,
      category: '运动器材',
      time: '15分钟前',
      location: '体育学院',
      description: '标准瑜伽垫，厚度8mm，使用过几次'
    },
    {
      id: 4,
      name: '保温杯',
      price: 25,
      category: '生活用品',
      time: '30分钟前',
      location: '商学院',
      description: '不锈钢保温杯，容量500ml，保温效果良好'
    }
  ];

  return (
    <div style={{ padding: '24px' }}>
      <Title level={2}>最新上架</Title>
      
      <div style={{ display: 'flex', gap: '24px' }}>
        {/* 商品列表 */}
        <div style={{ flex: 1 }}>
          <Card>
            <List
              itemLayout="vertical"
              size="large"
              dataSource={latestProducts}
              renderItem={item => (
                <List.Item
                  key={item.id}
                  extra={
                    <img
                      width={120}
                      alt="logo"
                      src={`https://picsum.photos/120/120?${item.id * 10 + 1}`}
                    />
                  }
                >
                  <List.Item.Meta
                    title={<a href="#">{item.name}</a>}
                    description={
                      <div>
                        <div style={{ fontSize: '18px', color: '#ff4d4f', marginBottom: '8px' }}>
                          ¥{item.price}
                        </div>
                        <div style={{ marginBottom: '8px' }}>
                          <Tag color="blue">{item.category}</Tag>
                          <Tag color="green">{item.location}</Tag>
                          <span style={{ color: '#999', marginLeft: '8px' }}>{item.time}</span>
                        </div>
                        <div style={{ color: '#666' }}>
                          {item.description}
                        </div>
                      </div>
                    }
                  />
                </List.Item>
              )}
            />
          </Card>
        </div>

        {/* 时间线 */}
        <div style={{ width: '300px' }}>
          <Card title="上架动态">
            <Timeline>
              <Timeline.Item color="green">
                <p>刚刚</p>
                <p>全新机械键盘 上架</p>
              </Timeline.Item>
              <Timeline.Item color="green">
                <p>5分钟前</p>
                <p>线性代数教材 上架</p>
              </Timeline.Item>
              <Timeline.Item color="blue">
                <p>15分钟前</p>
                <p>瑜伽垫 上架</p>
              </Timeline.Item>
              <Timeline.Item color="blue">
                <p>30分钟前</p>
                <p>保温杯 上架</p>
              </Timeline.Item>
            </Timeline>
          </Card>
        </div>
      </div>
    </div>
  );
};

export default LatestRecommend;